<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡片旋转</title>
    <link rel="stylesheet" href="../common.css">
</head>
<style>
    :root{
        --c1: #d8784b;
        --c2: #f8dfe3;
        --c3: #afcbe4;
        --c4: #c9afe3;
    }
    .loading{
        position: relative;
        width: 90px;
        height: 180px;
        /* 视距 */
        transform: perspective(1000px) rotateY(-45deg);
        /* 保留3d效果 */
        transform-style: preserve-3d;
    }
    .loading::after{
        content: "";
        position: absolute;
        width: 100%;
        height: 50px;
        background: #000;
        left: 0;
        bottom: -60px;
        filter: blur(30px);
        transform: rotateX(90deg);
    }
    .loading-box{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        /* 保留3d效果 */
        transform-style: preserve-3d;
        /* 添加旋转动画 */
        animation: rotate 5s linear infinite;
    }
    .loading-box-item{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: 10px;
        background: var(--c);
        transform: rotateX(var(--r));
    }
    @keyframes rotate {
        0%{
            transform: perspective(1000px) rotateX(0deg);
        }
        100%{
            transform: perspective(1000px) rotateX(1turn);
        }
    }
</style>
<body>
    <div class="loading">
        <div class="loading-box">
            <span class="loading-box-item" style="--c: var(--c1);--r: 0deg"></span>
            <span class="loading-box-item" style="--c: var(--c2);--r: 45deg"></span>
            <span class="loading-box-item" style="--c: var(--c3);--r: 90deg"></span>
            <span class="loading-box-item" style="--c: var(--c4);--r: 135deg"></span>
        </div>
    </div>
</body>
</html>